<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-21 09:50:52
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-20 14:01:39
-->
<template>
  <div class="menu-form-box">
    <a-form :model="formState" name="basic" :label-col="{ style: { width: '100px' } }">
      <a-form-item label="类别名称" name="menuName">
        <a-radio-group v-model:value="formState.menuType">
          <a-radio :value="1">用户端</a-radio>
          <a-radio :value="2">客户端</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="类别名称"
        name="menuName"
        :rules="[{ required: true, message: '请输入类别名称!' }]"
      >
        <a-input v-model:value="formState.menuName" />
      </a-form-item>
      <template v-if="menuType === 'user'">
        <a-form-item label="状态" name="state">
          <a-switch
            :checked="formState.state === 1"
            checked-children="开启"
            un-checked-children="关闭"
            @click="(checked) => switchClick(checked)"
          />
        </a-form-item>
      </template>
      <template v-else-if="menuType === 'manager'">
        <a-form-item label="核销模块" name="state">
          <a-input :value="formState.state" />
        </a-form-item>
      </template>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
const props = defineProps({
  formData: {
    type: Object,
    default(rawProps) {
      return rawProps;
    },
  },
});
const formState = reactive(props.formData);
const menuType = ref("user");
const switchClick = (checked) => {
  formState.state = checked ? 1 : 0;
};
defineExpose({
  formState,
});
</script>
<style lang="less" scoped>
.menu-form-box {
  padding: 30px 0;
}
</style>
